<!DOCTYPE html>
<html>

	<head>
		<style type="text/css">

		</style>
		<script type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				var cc = '';
				$("#query").click(function() {
					var city = $("$city").val();
					$.ajax({
						type: 'get',
						url: './citycode.php',
						data: {
							cityName: city
						},
						dataType: 'json',
						success: function(data) {
							//如果第二次ajax请求依赖于第一次请求结果，那么第二次请求必须放到回调函数内部
							//							cc = data.cityCode;
							//							console.log(cc);
							$.ajax({
								type: 'get',
								url: './cityweather.php',
								data: {
									cityCode: data.cityCode
								},
								dataType: 'json',
								success: function(data) {
									//								console.log(data);
									data = data.retData;
									var tag = '<ul>风向：' + data.WD +
										'<li>风级：' + data.WS + '</li><li>海拔：' +
										data.altitude + '</li><li>日期：' +
										data.date + '</li><li>最高温度：' +
										data.h_tmp + '</li><li>最低温度：' +
										data.l_tmp + '</li><li>平均温度：' +
										data.temp + '</li><li>日出时间：' +
										data.sunrise + '</li><li>日落时间：' +
										data.sunset + '</li><li>经度：' +
										data.longitude + '</li><li>维度：' +
										data.latitude + '</li></ul>';
									$("#info").html(tag);
								}
							});
						}
					});
					//					console.log(cc);

				});

			});
		</script>
		<meta charset="UTF-8">
		<title>城市</title>
	</head>

	<body>
		<div id="container">
			城市名称：<input type="text" id="city" />
			<input type="button" id="query" value="查询" />
		</div>
	</body>

</html>